<template>
  <view v-if="object.title" class="select-area">
    <view class="select-title">
      <view>{{ object.title || "" }}</view>
      <view class="tag-box" @click="modelShow = true">
        <i
          class="custom-icon custom-icon-info_fill"
          style="font-size: 40rpx; color: #e1e1e1"
        ></i>
      </view>
    </view>
    <!-- <view class="title-two">镜头类型</view>
    <view class="button-area">
      <view
        :class="[
          'button-area-item',
          { 'button-area-item-active': selectedBtn === 'lj' },
        ]"
        @click="btnSelectEvent('lj')"
        >棱镜</view
      >
      <view
        :class="[
          'button-area-item',
          { 'button-area-item-active': selectedBtn === 'bz' },
        ]"
        @click="btnSelectEvent('bz')"
        >标准</view
      >
    </view> -->
    <view class="title-two">镜头色</view>
    <view class="select-content">
      <view class="img-box">
        <image
          :src="object.img"
          mode="aspectFill"
          style="width: 100%; height: 100%"
        />
      </view>
      <view class="grid-box">
        <u-grid v-if="colorList.length" @click="gridClick" col="5">
          <u-grid-item v-for="(item, index) in colorList" :key="index">
            <view
              :style="{
                backgroundColor: index <= 8 ? item : '',
                marginBottom: index <= 4 ? '30rpx' : '0',
              }"
              :class="['grid-item', { gridActive: activeIndex === index }]"
            >
              <view
                v-if="activeIndex === index && index <= 8"
                class="check-box"
              >
                <u-icon
                  class="check-icon"
                  name="checkbox-mark"
                  size="20rpx"
                  color="#fff"
                >
                </u-icon>
              </view>
              <view v-if="index === 9" class="more-color"> 更多颜色 </view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <u-popup
      class="popup-show"
      :show="popupShow"
      closeOnClickOverlay
      @close="close"
    >
      <view class="popup-content">
        <view class="title-box">
          <view>更多颜色选择</view>
          <view class="close-btn">
            <u-icon name="close" size="40rpx" @click="close"></u-icon>
          </view>
        </view>
        <view class="grid-box">
          <u-grid v-if="colorList.length" @click="popupClick" col="5">
            <u-grid-item v-for="(item, index) in object.colorList" :key="index">
              <view
                :style="{
                  backgroundColor: item,
                  marginBottom: '30rpx',
                  width: '90rpx',
                  height: '90rpx',
                }"
                :class="['grid-item', { gridActive: activeIndex === index }]"
              >
                <view v-if="activeIndex === index" class="check-box">
                  <u-icon
                    class="check-icon"
                    name="checkbox-mark"
                    size="20rpx"
                    color="#fff"
                  >
                  </u-icon>
                </view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="btn-box" @click="sureEvent">确定</view>
      </view>
    </u-popup>
    <u-modal :show="modelShow" :title="object.title + '定制说明'">
      <view class="model-content">{{ object.tips }}</view>
      <template slot="confirmButton">
        <view class="close-btn" @click="modelShow = false">关闭</view>
      </template>
    </u-modal>
  </view>
</template>
<script>
export default {
  name: "selectArea",
  props: {
    object: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeIndex: 0,
      colorList: [],
      popupShow: false,
      modelShow: false,
      selectedBtn: "lj",
    };
  },
  watch: {
    object: {
      handler(newVal, oldVal) {
        if (newVal.colorList.length && newVal.colorList.length > 10) {
          this.colorList = newVal.colorList.slice(0, 10);
        } else {
          this.colorList = newVal.colorList;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    const popup = document.querySelectorAll(".popup-show");
    popup.forEach((item) => {
      item.addEventListener(
        "touchmove",
        (e) => {
          e.preventDefault();
          e.stopPropagation();
        },
        { passive: false }
      );
    });
  },
  methods: {
    gridClick(index) {
      if (index === 9) {
        this.popupShow = true;
      } else {
        this.activeIndex = index;
        this.$emit("selectColor", {
          color: this.object.colorList[this.activeIndex],
          id: "jngts",
        });
      }
    },
    close() {
      this.popupShow = false;
    },
    popupClick(index) {
      this.activeIndex = index;
    },
    sureEvent() {
      this.$emit("selectColor", {
        color: this.object.colorList[this.activeIndex],
        id: this.object.id,
      });
      this.popupShow = false;
    },
    btnSelectEvent(id) {
      this.selectedBtn = id;
      this.$emit("selectBtn", {
        id: id,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.select-area {
  padding: 20rpx;
  .select-title {
    color: #222;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40rpx 0;
    .tag-box {
      margin-left: 20rpx;
    }
  }
  .title-two {
    color: #b79e4c;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }
  .button-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
    .button-area-item {
      width: 47%;
      border-radius: 20rpx;
      padding: 30rpx 0;
      text-align: center;
      color: #fff;
      background-color: #ebebeb;
      color: #9a9a9a;
    }
    .button-area-item-active {
      background-color: #d1ad37;
      color: #fff;
    }
  }
  .tag-content {
    min-width: 300rpx;
  }
  .select-content {
    display: flex;
    align-items: center;
    .img-box {
      width: 180rpx;
      height: 180rpx;
      border: 1px solid #ccc;
      border-radius: 20rpx;
      margin-right: 20rpx;
      overflow: hidden;
    }
  }
}
.grid-box {
  flex: 1;
  .grid-item {
    width: 75rpx;
    height: 75rpx;
    position: relative;
    border-radius: 10rpx;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    .check-box {
      position: absolute;
      top: 0;
      right: 0;
      width: 32rpx;
      height: 32rpx;
      background-color: #d1ad37;
      color: #fff;
      text-align: center;
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
    .check-icon {
      position: absolute;
      top: 0;
      right: 0;
    }
    .more-color {
      font-size: 24rpx;
      color: #999;
      width: 80%;
      text-align: center;
    }
  }
  .gridActive {
    border: 2px solid #d1ad37;
  }
}
.popup-content {
  padding: 30rpx;
  .title-box {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
    width: 100%;
    text-align: center;
    position: relative;
    .close-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .btn-box {
    width: 70%;
    margin: 0 auto;
    background-color: #d1ad37;
    color: #fff;
    font-size: 30rpx;
    border-radius: 50rpx;
    padding: 20rpx;
    text-align: center;
  }
}
.close-btn {
  width: 200rpx;
  margin: 0 auto;
  background-color: #c8c8c8;
  color: #fff;
  text-align: center;
  padding: 15rpx 0;
  border-radius: 50rpx;
}
::v-deep .u-modal__title {
  font-size: 34rpx !important;
  font-weight: normal !important;
  color: #1c1c1c !important;
}
.model-content {
  margin-top: 20rpx;
}
</style>
